<!-- build time:Thu Oct 04 2018 22:01:07 GMT+0800 (中国标准时间) -->
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
        <meta name="renderer" content="webkit">
        <meta http-equiv="Cache-Control" content="no-transform">
        <meta http-equiv="Cache-Control" content="no-siteapp">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="format-detection" content="telephone=no,email=no,adress=no">
        <meta name="theme-color" content="#000000">
        <meta http-equiv="window-target" content="_top">
        <title>Visual Studio Code个人使用插件整理 | Cofess - Web Developer &amp;Designer</title>
        <meta name="description" content="开发 文件大小 filesize显示当前文件大小插件地址：传送门 字符转换 String Manipulation字符串转换处理（驼峰、大写开头、下划线等等）插件地址：传送门 代码比对 Partial Diff对比两段代码或文件插件地址：传送门 代码阅读体验优化 Guides高亮缩进基准线插件地址：传送门 Indenticator缩进高亮插件地址：传送门 Bracket Pair Coloriz">
        <meta name="keywords" content="开发工具,Visual Studio Code,vscode插件">
        <meta property="og:type" content="article">
        <meta property="og:title" content="Visual Studio Code个人使用插件整理">
        <meta property="og:url" content="https://blog.cofess.com/2017/12/17/visual-studio-code-personal-use-plug-in-colation.html">
        <meta property="og:site_name" content="Cofess">
        <meta property="og:description" content="开发 文件大小 filesize显示当前文件大小插件地址：传送门 字符转换 String Manipulation字符串转换处理（驼峰、大写开头、下划线等等）插件地址：传送门 代码比对 Partial Diff对比两段代码或文件插件地址：传送门 代码阅读体验优化 Guides高亮缩进基准线插件地址：传送门 Indenticator缩进高亮插件地址：传送门 Bracket Pair Coloriz">
        <meta property="og:locale" content="zh-CN">
        <meta property="og:updated_time" content="2017-12-17T10:47:14.920Z">
        <meta name="twitter:card" content="summary">
        <meta name="twitter:title" content="Visual Studio Code个人使用插件整理">
        <meta name="twitter:description" content="开发 文件大小 filesize显示当前文件大小插件地址：传送门 字符转换 String Manipulation字符串转换处理（驼峰、大写开头、下划线等等）插件地址：传送门 代码比对 Partial Diff对比两段代码或文件插件地址：传送门 代码阅读体验优化 Guides高亮缩进基准线插件地址：传送门 Indenticator缩进高亮插件地址：传送门 Bracket Pair Coloriz">
        <link rel="canonical" href="https://blog.cofess.com/2017/12/17/visual-studio-code-personal-use-plug-in-colation.html">
        <link rel="alternate" href="/atom.xml" title="Cofess" type="application/atom+xml">
        <link rel="icon" href="" type="image/x-icon">
        <link rel="stylesheet" href="/static/css/style.css">
    </head>
    <body class="main-center" itemscope itemtype="http://schema.org/WebPage">
        <header class="header" itemscope itemtype="http://schema.org/WPHeader">
            <div class="slimContent">
                <div class="navbar-header">
                    <div class="profile-block text-center">
                        <a id="avatar" href="https://github.com/cofess" target="_blank">
                            <img class="img-circle img-rotate" src="/images/avatar.jpg" width="200" height="200">
                        </a>
                        <h2 id="name" class="hidden-xs hidden-sm">Cofess</h2>
                        <h3 id="title" class="hidden-xs hidden-sm hidden-md">Web Developer &amp;Designer</h3>
                        <small id="location" class="text-muted hidden-xs hidden-sm">
                            <i class="icon icon-map-marker"></i>
                            Shenzhen, China
                        </small>
                    </div>
                    <div class="search" id="search-form-wrap">
                        <form class="search-form sidebar-form">
                            <div class="input-group">
                                <input type="text" class="search-form-input form-control" placeholder="搜索">
                                <span class="input-group-btn">
                                    <button type="submit" class="search-form-submit btn btn-flat" onclick="return!1">
                                        <i class="icon icon-search"></i>
                                    </button>
                                </span>
                            </div>
                        </form>
                        <div class="ins-search">
                            <div class="ins-search-mask"></div>
                            <div class="ins-search-container">
                                <div class="ins-input-wrapper">
                                    <input type="text" class="ins-search-input" placeholder="想要查找什么..." x-webkit-speech>
                                    <button type="button" class="close ins-close ins-selectable" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                                </div>
                                <div class="ins-section-wrapper">
                                    <div class="ins-section-container"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <nav id="main-navbar" class="collapse navbar-collapse" itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation">
                    <ul class="nav navbar-nav main-nav">
                        <li class="menu-item menu-item-home">
                            <a href="/.">
                                <i class="icon icon-home-fill"></i>
                                <span class="menu-title">首页</span>
                            </a>
                        </li>
                        <li class="menu-item menu-item-archives">
                            <a href="/archives">
                                <i class="icon icon-archives-fill"></i>
                                <span class="menu-title">归档</span>
                            </a>
                        </li>
                        <li class="menu-item menu-item-categories">
                            <a href="/categories">
                                <i class="icon icon-folder"></i>
                                <span class="menu-title">分类</span>
                            </a>
                        </li>
                        <li class="menu-item menu-item-tags">
                            <a href="/tags">
                                <i class="icon icon-tags"></i>
                                <span class="menu-title">标签</span>
                            </a>
                        </li>
                        <li class="menu-item menu-item-repository">
                            <a href="/repository">
                                <i class="icon icon-project"></i>
                                <span class="menu-title">项目</span>
                            </a>
                        </li>
                        <li class="menu-item menu-item-books">
                            <a href="/books">
                                <i class="icon icon-book-fill"></i>
                                <span class="menu-title">书单</span>
                            </a>
                        </li>
                        <li class="menu-item menu-item-links">
                            <a href="/links">
                                <i class="icon icon-friendship"></i>
                                <span class="menu-title">友链</span>
                            </a>
                        </li>
                        <li class="menu-item menu-item-about">
                            <a href="/about">
                                <i class="icon icon-cup-fill"></i>
                                <span class="menu-title">关于</span>
                            </a>
                        </li>
                    </ul>
                    <ul class="social-links">
                        <li>
                            <a href="https://github.com/cofess" target="_blank" title="Github" data-toggle="tooltip" data-placement="top">
                                <i class="icon icon-github"></i>
                            </a>
                        </li>
                        <li>
                            <a href="http://weibo.com/cofess" target="_blank" title="Weibo" data-toggle="tooltip" data-placement="top">
                                <i class="icon icon-weibo"></i>
                            </a>
                        </li>
                        <li>
                            <a href="https://twitter.com/iwebued" target="_blank" title="Twitter" data-toggle="tooltip" data-placement="top">
                                <i class="icon icon-twitter"></i>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.behance.net/cofess" target="_blank" title="Behance" data-toggle="tooltip" data-placement="top">
                                <i class="icon icon-behance"></i>
                            </a>
                        </li>
                        <li>
                            <a href="/atom.xml" target="_blank" title="Rss" data-toggle="tooltip" data-placement="top">
                                <i class="icon icon-rss"></i>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>
        <aside class="sidebar" itemscope itemtype="http://schema.org/WPSideBar">
            <div class="slimContent">
                <div class="widget">
                    <h3 class="widget-title">公告</h3>
                    <div class="widget-body">
                        <div id="board">
                            <div class="content">
                                网易星球邀请码：AD3LCW，有机会赢取1.39克拉黑钻【珂兰钻石】，价值7万8，老司机快上车～～请在浏览器中复制粘贴该链接 <a class="text-primary" href="https://163.lu/GTe6P3" target="_blank">https://163.lu/GTe6P3</a>
                                或者扫描以下二维码，并下载登录
                                <div>
                                    <img src="/images/xingqiu-qrcode.jpg" width="140" height="140">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="widget">
                    <h3 class="widget-title">分类</h3>
                    <div class="widget-body">
                        <ul class="category-list">
                            <li class="category-list-item">
                                <a class="category-list-link" href="/categories/个人/">个人</a>
                                <span class="category-list-count">1</span>
                            </li>
                            <li class="category-list-item">
                                <a class="category-list-link" href="/categories/front-end-development/">前端</a>
                                <span class="category-list-count">1</span>
                            </li>
                            <li class="category-list-item">
                                <a class="category-list-link" href="/categories/build-website/">建站</a>
                                <span class="category-list-count">1</span>
                            </li>
                            <li class="category-list-item">
                                <a class="category-list-link" href="/categories/开发/">开发</a>
                                <span class="category-list-count">1</span>
                            </li>
                            <li class="category-list-item">
                                <a class="category-list-link" href="/categories/开发工具/">开发工具</a>
                                <span class="category-list-count">1</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="widget">
                    <h3 class="widget-title">标签</h3>
                    <div class="widget-body">
                        <ul class="tag-list">
                            <li class="tag-list-item">
                                <a class="tag-list-link" href="/tags/Github/">Github</a>
                                <span class="tag-list-count">1</span>
                            </li>
                            <li class="tag-list-item">
                                <a class="tag-list-link" href="/tags/gulp/">Gulp</a>
                                <span class="tag-list-count">1</span>
                            </li>
                            <li class="tag-list-item">
                                <a class="tag-list-link" href="/tags/Hexo/">Hexo</a>
                                <span class="tag-list-count">4</span>
                            </li>
                            <li class="tag-list-item">
                                <a class="tag-list-link" href="/tags/social/">Social</a>
                                <span class="tag-list-count">1</span>
                            </li>
                            <li class="tag-list-item">
                                <a class="tag-list-link" href="/tags/工具/">工具</a>
                                <span class="tag-list-count">1</span>
                            </li>
                            <li class="tag-list-item">
                                <a class="tag-list-link" href="/tags/状态/">状态</a>
                                <span class="tag-list-count">1</span>
                            </li>
                            <li class="tag-list-item">
                                <a class="tag-list-link" href="/tags/程序员/">程序员</a>
                                <span class="tag-list-count">1</span>
                            </li>
                            <li class="tag-list-item">
                                <a class="tag-list-link" href="/tags/计划/">计划</a>
                                <span class="tag-list-count">1</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="widget">
                    <h3 class="widget-title">标签云</h3>
                    <div class="widget-body tagcloud">
                        <a href="/tags/Github/" style="font-size:13px">Github</a>
                        <a href="/tags/gulp/" style="font-size:13px">Gulp</a>
                        <a href="/tags/Hexo/" style="font-size:14px">Hexo</a>
                        <a href="/tags/social/" style="font-size:13px">Social</a>
                        <a href="/tags/工具/" style="font-size:13px">工具</a>
                        <a href="/tags/状态/" style="font-size:13px">状态</a>
                        <a href="/tags/程序员/" style="font-size:13px">程序员</a>
                        <a href="/tags/计划/" style="font-size:13px">计划</a>
                    </div>
                </div>
                <div class="widget">
                    <h3 class="widget-title">归档</h3>
                    <div class="widget-body">
                        <ul class="archive-list">
                            <li class="archive-list-item">
                                <a class="archive-list-link" href="/archives/2018/03/">三月 2018</a>
                                <span class="archive-list-count">2</span>
                            </li>
                            <li class="archive-list-item">
                                <a class="archive-list-link" href="/archives/2017/12/">十二月 2017</a>
                                <span class="archive-list-count">1</span>
                            </li>
                            <li class="archive-list-item">
                                <a class="archive-list-link" href="/archives/2017/11/">十一月 2017</a>
                                <span class="archive-list-count">1</span>
                            </li>
                            <li class="archive-list-item">
                                <a class="archive-list-link" href="/archives/2017/09/">九月 2017</a>
                                <span class="archive-list-count">1</span>
                            </li>
                            <li class="archive-list-item">
                                <a class="archive-list-link" href="/archives/2017/08/">八月 2017</a>
                                <span class="archive-list-count">3</span>
                            </li>
                            <li class="archive-list-item">
                                <a class="archive-list-link" href="/archives/2017/04/">四月 2017</a>
                                <span class="archive-list-count">1</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="widget">
                    <h3 class="widget-title">最新文章</h3>
                    <div class="widget-body">
                        <ul class="recent-post-list list-unstyled no-thumbnail">
                            <li>
                                <div class="item-inner">
                                    <p class="item-category">
                                        <a class="category-link" href="/categories/开发/">开发</a>
                                    </p>
                                    <p class="item-title">
                                        <a href="/2018/03/28/那些有趣的注释，有没有你曾用过的.html" class="title">那些有趣的注释，有没有你曾用过的</a>
                                    </p>
                                    <p class="item-date">
                                        <time datetime="2018-03-28T12:45:41.000Z" itemprop="datePublished">2018-03-28</time>
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div class="item-inner">
                                    <p class="item-category">
                                        <a class="category-link" href="/categories/个人/">个人</a>
                                    </p>
                                    <p class="item-title">
                                        <a href="/2018/03/25/年后的状态，懒！.html" class="title">年后的状态，懒！</a>
                                    </p>
                                    <p class="item-date">
                                        <time datetime="2018-03-25T06:59:41.000Z" itemprop="datePublished">2018-03-25</time>
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div class="item-inner">
                                    <p class="item-category">
                                        <a class="category-link" href="/categories/开发工具/">开发工具</a>
                                    </p>
                                    <p class="item-title">
                                        <a href="/2017/12/17/visual-studio-code-personal-use-plug-in-colation.html" class="title">Visual Studio Code个人使用插件整理</a>
                                    </p>
                                    <p class="item-date">
                                        <time datetime="2017-12-17T10:32:51.000Z" itemprop="datePublished">2017-12-17</time>
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div class="item-inner">
                                    <p class="item-category"></p>
                                    <p class="item-title">
                                        <a href="/2017/11/01/hexo-blog-theme-pure-usage-description.html" class="title">Hexo博客主题pure使用说明</a>
                                    </p>
                                    <p class="item-date">
                                        <time datetime="2017-11-01T13:45:08.000Z" itemprop="datePublished">2017-11-01</time>
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div class="item-inner">
                                    <p class="item-category"></p>
                                    <p class="item-title">
                                        <a href="/2017/09/06/how-to-use-mathjax-to-render-latex-mathematical-formula-in-hexo.html" class="title">如何在Hexo中使用Mathjax渲染LaTeX数学公式</a>
                                    </p>
                                    <p class="item-date">
                                        <time datetime="2017-09-06T01:19:34.000Z" itemprop="datePublished">2017-09-06</time>
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </aside>
        <aside class="sidebar sidebar-toc collapse" id="collapseToc" itemscope itemtype="http://schema.org/WPSideBar">
            <div class="slimContent">
                <nav id="toc" class="article-toc">
                    <h3 class="toc-title">文章目录</h3>
                    <ol class="toc">
                        <li class="toc-item toc-level-1">
                            <a class="toc-link" href="#开发">
                                <span class="toc-number">1.</span>
                                <span class="toc-text">开发</span>
                            </a>
                            <ol class="toc-child">
                                <li class="toc-item toc-level-2">
                                    <a class="toc-link" href="#文件大小">
                                        <span class="toc-number">1.1.</span>
                                        <span class="toc-text">文件大小</span>
                                    </a>
                                    <ol class="toc-child">
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#filesize">
                                                <span class="toc-number">1.1.1.</span>
                                                <span class="toc-text">filesize</span>
                                            </a>
                                        </li>
                                    </ol>
                                </li>
                                <li class="toc-item toc-level-2">
                                    <a class="toc-link" href="#字符转换">
                                        <span class="toc-number">1.2.</span>
                                        <span class="toc-text">字符转换</span>
                                    </a>
                                    <ol class="toc-child">
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#string-manipulation">
                                                <span class="toc-number">1.2.1.</span>
                                                <span class="toc-text">String Manipulation</span>
                                            </a>
                                        </li>
                                    </ol>
                                </li>
                                <li class="toc-item toc-level-2">
                                    <a class="toc-link" href="#代码比对">
                                        <span class="toc-number">1.3.</span>
                                        <span class="toc-text">代码比对</span>
                                    </a>
                                    <ol class="toc-child">
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#partial-diff">
                                                <span class="toc-number">1.3.1.</span>
                                                <span class="toc-text">Partial Diff</span>
                                            </a>
                                        </li>
                                    </ol>
                                </li>
                                <li class="toc-item toc-level-2">
                                    <a class="toc-link" href="#代码阅读体验优化">
                                        <span class="toc-number">1.4.</span>
                                        <span class="toc-text">代码阅读体验优化</span>
                                    </a>
                                    <ol class="toc-child">
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#guides">
                                                <span class="toc-number">1.4.1.</span>
                                                <span class="toc-text">Guides</span>
                                            </a>
                                        </li>
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#indenticator">
                                                <span class="toc-number">1.4.2.</span>
                                                <span class="toc-text">Indenticator</span>
                                            </a>
                                        </li>
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#bracket-pair-colorizer">
                                                <span class="toc-number">1.4.3.</span>
                                                <span class="toc-text">Bracket Pair Colorizer</span>
                                            </a>
                                        </li>
                                    </ol>
                                </li>
                                <li class="toc-item toc-level-2">
                                    <a class="toc-link" href="#文件定位">
                                        <span class="toc-number">1.5.</span>
                                        <span class="toc-text">文件定位</span>
                                    </a>
                                    <ol class="toc-child">
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#file-peek">
                                                <span class="toc-number">1.5.1.</span>
                                                <span class="toc-text">File Peek</span>
                                            </a>
                                        </li>
                                    </ol>
                                </li>
                                <li class="toc-item toc-level-2">
                                    <a class="toc-link" href="#书签">
                                        <span class="toc-number">1.6.</span>
                                        <span class="toc-text">书签</span>
                                    </a>
                                    <ol class="toc-child">
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#bookmarks">
                                                <span class="toc-number">1.6.1.</span>
                                                <span class="toc-text">Bookmarks</span>
                                            </a>
                                        </li>
                                    </ol>
                                </li>
                                <li class="toc-item toc-level-2">
                                    <a class="toc-link" href="#注释">
                                        <span class="toc-number">1.7.</span>
                                        <span class="toc-text">注释</span>
                                    </a>
                                    <ol class="toc-child">
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#fileheader">
                                                <span class="toc-number">1.7.1.</span>
                                                <span class="toc-text">fileheader</span>
                                            </a>
                                        </li>
                                    </ol>
                                </li>
                                <li class="toc-item toc-level-2">
                                    <a class="toc-link" href="#自动完成">
                                        <span class="toc-number">1.8.</span>
                                        <span class="toc-text">自动完成</span>
                                    </a>
                                    <ol class="toc-child">
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#path-autocomplete">
                                                <span class="toc-number">1.8.1.</span>
                                                <span class="toc-text">Path Autocomplete</span>
                                            </a>
                                        </li>
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#path-intellisense">
                                                <span class="toc-number">1.8.2.</span>
                                                <span class="toc-text">Path Intellisense</span>
                                            </a>
                                        </li>
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#php-intellisense">
                                                <span class="toc-number">1.8.3.</span>
                                                <span class="toc-text">PHP IntelliSense</span>
                                            </a>
                                        </li>
                                    </ol>
                                </li>
                                <li class="toc-item toc-level-2">
                                    <a class="toc-link" href="#for-php">
                                        <span class="toc-number">1.9.</span>
                                        <span class="toc-text">For PHP</span>
                                    </a>
                                    <ol class="toc-child">
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#composer">
                                                <span class="toc-number">1.9.1.</span>
                                                <span class="toc-text">composer</span>
                                            </a>
                                        </li>
                                    </ol>
                                </li>
                                <li class="toc-item toc-level-2">
                                    <a class="toc-link" href="#git">
                                        <span class="toc-number">1.10.</span>
                                        <span class="toc-text">Git</span>
                                    </a>
                                    <ol class="toc-child">
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#gitlens">
                                                <span class="toc-number">1.10.1.</span>
                                                <span class="toc-text">GitLens</span>
                                            </a>
                                        </li>
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#git-history">
                                                <span class="toc-number">1.10.2.</span>
                                                <span class="toc-text">Git History</span>
                                            </a>
                                        </li>
                                    </ol>
                                </li>
                            </ol>
                        </li>
                        <li class="toc-item toc-level-1">
                            <a class="toc-link" href="#前端开发">
                                <span class="toc-number">2.</span>
                                <span class="toc-text">前端开发</span>
                            </a>
                            <ol class="toc-child">
                                <li class="toc-item toc-level-2">
                                    <a class="toc-link" href="#自动完成-2">
                                        <span class="toc-number">2.1.</span>
                                        <span class="toc-text">自动完成</span>
                                    </a>
                                    <ol class="toc-child">
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#atuo-rename-tag">
                                                <span class="toc-number">2.1.1.</span>
                                                <span class="toc-text">Atuo Rename Tag</span>
                                            </a>
                                        </li>
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#auto-close-tag">
                                                <span class="toc-number">2.1.2.</span>
                                                <span class="toc-text">Auto Close Tag</span>
                                            </a>
                                        </li>
                                    </ol>
                                </li>
                                <li class="toc-item toc-level-2">
                                    <a class="toc-link" href="#代码提示">
                                        <span class="toc-number">2.2.</span>
                                        <span class="toc-text">代码提示</span>
                                    </a>
                                    <ol class="toc-child">
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#html-snippets">
                                                <span class="toc-number">2.2.1.</span>
                                                <span class="toc-text">HTML Snippets</span>
                                            </a>
                                        </li>
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#html-css-support">
                                                <span class="toc-number">2.2.2.</span>
                                                <span class="toc-text">HTML CSS Support</span>
                                            </a>
                                        </li>
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#icon-fonts">
                                                <span class="toc-number">2.2.3.</span>
                                                <span class="toc-text">Icon Fonts</span>
                                            </a>
                                        </li>
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#color-info">
                                                <span class="toc-number">2.2.4.</span>
                                                <span class="toc-text">Color Info</span>
                                            </a>
                                        </li>
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#jquery-code-snippets">
                                                <span class="toc-number">2.2.5.</span>
                                                <span class="toc-text">jQuery Code Snippets</span>
                                            </a>
                                        </li>
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#bootstrap-3-sinnpet">
                                                <span class="toc-number">2.2.6.</span>
                                                <span class="toc-text">Bootstrap 3 Sinnpet</span>
                                            </a>
                                        </li>
                                    </ol>
                                </li>
                                <li class="toc-item toc-level-2">
                                    <a class="toc-link" href="#代码审查">
                                        <span class="toc-number">2.3.</span>
                                        <span class="toc-text">代码审查</span>
                                    </a>
                                    <ol class="toc-child">
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#eslint">
                                                <span class="toc-number">2.3.1.</span>
                                                <span class="toc-text">ESlint</span>
                                            </a>
                                        </li>
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#htmlhint">
                                                <span class="toc-number">2.3.2.</span>
                                                <span class="toc-text">HTMLHint</span>
                                            </a>
                                        </li>
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#caniuse">
                                                <span class="toc-number">2.3.3.</span>
                                                <span class="toc-text">caniuse</span>
                                            </a>
                                        </li>
                                    </ol>
                                </li>
                                <li class="toc-item toc-level-2">
                                    <a class="toc-link" href="#模版">
                                        <span class="toc-number">2.4.</span>
                                        <span class="toc-text">模版</span>
                                    </a>
                                    <ol class="toc-child">
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#html-boilerplate">
                                                <span class="toc-number">2.4.1.</span>
                                                <span class="toc-text">HTML Boilerplate</span>
                                            </a>
                                        </li>
                                    </ol>
                                </li>
                                <li class="toc-item toc-level-2">
                                    <a class="toc-link" href="#格式化">
                                        <span class="toc-number">2.5.</span>
                                        <span class="toc-text">格式化</span>
                                    </a>
                                    <ol class="toc-child">
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#beautify">
                                                <span class="toc-number">2.5.1.</span>
                                                <span class="toc-text">beautify</span>
                                            </a>
                                        </li>
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#prettier">
                                                <span class="toc-number">2.5.2.</span>
                                                <span class="toc-text">Prettier</span>
                                            </a>
                                        </li>
                                    </ol>
                                </li>
                                <li class="toc-item toc-level-2">
                                    <a class="toc-link" href="#代码定位">
                                        <span class="toc-number">2.6.</span>
                                        <span class="toc-text">代码定位</span>
                                    </a>
                                    <ol class="toc-child">
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#css-peek">
                                                <span class="toc-number">2.6.1.</span>
                                                <span class="toc-text">CSS Peek</span>
                                            </a>
                                        </li>
                                    </ol>
                                </li>
                                <li class="toc-item toc-level-2">
                                    <a class="toc-link" href="#正则表达式">
                                        <span class="toc-number">2.7.</span>
                                        <span class="toc-text">正则表达式</span>
                                    </a>
                                    <ol class="toc-child">
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#regex-previewer">
                                                <span class="toc-number">2.7.1.</span>
                                                <span class="toc-text">Regex Previewer</span>
                                            </a>
                                        </li>
                                    </ol>
                                </li>
                                <li class="toc-item toc-level-2">
                                    <a class="toc-link" href="#代码压缩">
                                        <span class="toc-number">2.8.</span>
                                        <span class="toc-text">代码压缩</span>
                                    </a>
                                    <ol class="toc-child">
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#minify">
                                                <span class="toc-number">2.8.1.</span>
                                                <span class="toc-text">Minify</span>
                                            </a>
                                        </li>
                                    </ol>
                                </li>
                                <li class="toc-item toc-level-2">
                                    <a class="toc-link" href="#调试">
                                        <span class="toc-number">2.9.</span>
                                        <span class="toc-text">调试</span>
                                    </a>
                                    <ol class="toc-child">
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#debugger-for-chrome">
                                                <span class="toc-number">2.9.1.</span>
                                                <span class="toc-text">Debugger for Chrome</span>
                                            </a>
                                        </li>
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#quokka">
                                                <span class="toc-number">2.9.2.</span>
                                                <span class="toc-text">Quokka</span>
                                            </a>
                                        </li>
                                    </ol>
                                </li>
                            </ol>
                        </li>
                        <li class="toc-item toc-level-1">
                            <a class="toc-link" href="#vue插件">
                                <span class="toc-number">3.</span>
                                <span class="toc-text">Vue插件</span>
                            </a>
                            <ol class="toc-child">
                                <li class="toc-item toc-level-2">
                                    <a class="toc-link" href="#代码提示-2">
                                        <span class="toc-number">3.1.</span>
                                        <span class="toc-text">代码提示</span>
                                    </a>
                                    <ol class="toc-child">
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#vetur">
                                                <span class="toc-number">3.1.1.</span>
                                                <span class="toc-text">vetur</span>
                                            </a>
                                        </li>
                                        <li class="toc-item toc-level-3">
                                            <a class="toc-link" href="#vuehelper">
                                                <span class="toc-number">3.1.2.</span>
                                                <span class="toc-text">VueHelper</span>
                                            </a>
                                        </li>
                                    </ol>
                                </li>
                            </ol>
                        </li>
                        <li class="toc-item toc-level-1">
                            <a class="toc-link" href="#其他">
                                <span class="toc-number">4.</span>
                                <span class="toc-text">其他</span>
                            </a>
                            <ol class="toc-child">
                                <li class="toc-item toc-level-3">
                                    <a class="toc-link" href="#faker">
                                        <span class="toc-number">4.0.1.</span>
                                        <span class="toc-text">Faker</span>
                                    </a>
                                </li>
                                <li class="toc-item toc-level-3">
                                    <a class="toc-link" href="#svg-viewer">
                                        <span class="toc-number">4.0.2.</span>
                                        <span class="toc-text">SVG Viewer</span>
                                    </a>
                                </li>
                                <li class="toc-item toc-level-3">
                                    <a class="toc-link" href="#todo-highlight">
                                        <span class="toc-number">4.0.3.</span>
                                        <span class="toc-text">TODO Highlight</span>
                                    </a>
                                </li>
                            </ol>
                        </li>
                    </ol>
                </nav>
            </div>
        </aside>
        <main class="main" role="main">
            <div class="content">
                <article id="post-visual-studio-code-personal-use-plug-in-colation" class="article article-type-post" itemscope itemtype="http://schema.org/BlogPosting">
                    <div class="article-header">
                        <h1 class="article-title" itemprop="name">Visual Studio Code个人使用插件整理</h1>
                        <div class="article-meta">
                            <span class="article-date">
                                <i class="icon icon-calendar-check"></i>
                                <a href="/2017/12/17/visual-studio-code-personal-use-plug-in-colation.html" class="article-date">
                                    <time datetime="2017-12-17T10:32:51.000Z" itemprop="datePublished">2017-12-17</time>
                                </a>
                            </span>
                            <span class="article-category">
                                <i class="icon icon-folder"></i>
                                <a class="article-category-link" href="/categories/开发工具/">开发工具</a>
                            </span>
                            <span class="article-tag">
                                <i class="icon icon-tags"></i>
                                <a class="article-tag-link" href="/tags/工具/">工具</a>
                            </span>
                            <span class="article-read hidden-xs">
                                <i class="icon icon-eye-fill" aria-hidden="true"></i>
                                <span id="busuanzi_container_page_pv">
                                    <span id="busuanzi_value_page_pv">0</span>
                                </span>
                            </span>
                            <span class="post-comment">
                                <i class="icon icon-comment"></i>
                                <a href="/2017/12/17/visual-studio-code-personal-use-plug-in-colation.html#comments" class="article-comment-link">评论</a>
                            </span>
                            <span class="post-wordcount hidden-xs" itemprop="wordCount">字数统计: 1,453(字)</span>
                            <span class="post-readcount hidden-xs" itemprop="timeRequired">阅读时长: 5(分)</span>
                        </div>
                    </div>
                    <div class="article-entry marked-body" itemprop="articleBody">
                        {{ article.content|safe }}
                    </div>
                    <div class="article-footer">
                        <blockquote class="mt-2x">
                            <ul class="post-copyright list-unstyled">
                                <li class="post-copyright-link hidden-xs">
                                    <strong>本文链接：</strong>
                                    <a href="https://blog.cofess.com/2017/12/17/visual-studio-code-personal-use-plug-in-colation.html" title="Visual Studio Code个人使用插件整理" target="_blank" rel="external">https://blog.cofess.com/2017/12/17/visual-studio-code-personal-use-plug-in-colation.html</a>
                                </li>
                                <li class="post-copyright-license">
                                    <strong>版权声明： </strong>
                                    本博客所有文章除特别声明外，均采用 <a href="http://creativecommons.org/licenses/by/4.0/deed.zh" target="_blank" rel="external">CC BY 4.0 CN协议</a>
                                    许可协议。转载请注明出处！
                                </li>
                            </ul>
                        </blockquote>
                        <div class="panel panel-default panel-badger">
                            <div class="panel-body">
                                <figure class="media">
                                    <div class="media-left">
                                        <a href="https://github.com/cofess" target="_blank" class="img-burn thumb-sm visible-lg">
                                            <img src="/images/avatar.jpg" class="img-rounded w-full" alt="">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h3 class="media-heading">
                                            <a href="https://github.com/cofess" target="_blank">
                                                <span class="text-dark">Cofess</span>
                                                <small class="ml-1x">Web Developer &amp;Designer</small>
                                            </a>
                                        </h3>
                                        <div>喜欢新事物，关注前端动态，对新的技术有追求； 喜欢产品，喜欢设计，喜欢 coding。</div>
                                    </div>
                                </figure>
                            </div>
                        </div>
                    </div>
                </article>
                <section id="comments"></section>
            </div>
            <nav class="bar bar-footer clearfix" data-stick-bottom>
                <div class="bar-inner">
                    <ul class="pager pull-left">
                        <li class="prev">
                            <a href="{{ prev_article.url }}" title="{{ prev_article.title }}">
                                <i class="icon icon-angle-left" aria-hidden="true"></i>
                                <span>&nbsp;&nbsp;上一篇</span>
                            </a>
                        </li>
                        <li class="next">
                            <a href="{{ next_article.url }}" title="{{ next_article.title }}">
                                <span>下一篇&nbsp;&nbsp;</span>
                                <i class="icon icon-angle-right" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li class="toggle-toc">
                            <a class="toggle-btn collapsed" data-toggle="collapse" href="#collapseToc" aria-expanded="false" title="文章目录" role="button">
                                <span>[&nbsp;</span>
                                <span>文章目录</span>
                                <i class="text-collapsed icon icon-anchor"></i>
                                <i class="text-in icon icon-close"></i>
                                <span>]</span>
                            </a>
                        </li>
                    </ul>
                    <button type="button" class="btn btn-fancy btn-donate pop-onhover bg-gradient-warning" data-toggle="modal" data-target="#donateModal">
                        <span>赏</span>
                    </button>
                    <div class="bar-right">
                        <div class="share-component" data-sites="weibo,qq,wechat,facebook,twitter" data-mobile-sites="weibo,qq,qzone"></div>
                    </div>
                </div>
            </nav>
            <div class="modal modal-center modal-small modal-xs-full fade" id="donateModal" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content donate">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <div class="modal-body">
                            <div class="donate-box">
                                <div class="donate-head">
                                    <p>感谢您的支持，我会继续努力的!</p>
                                </div>
                                <div class="tab-content">
                                    <div role="tabpanel" class="tab-pane fade active in" id="alipay">
                                        <div class="donate-payimg">
                                            <img src="/images/donate/alipayimg.png" alt="扫码支持" title="扫一扫">
                                        </div>
                                        <p class="text-muted mv">扫码打赏，你说多少就多少</p>
                                        <p class="text-grey">打开支付宝扫一扫，即可进行扫码打赏哦</p>
                                    </div>
                                    <div role="tabpanel" class="tab-pane fade" id="wechatpay">
                                        <div class="donate-payimg">
                                            <img src="/images/donate/wechatpayimg.png" alt="扫码支持" title="扫一扫">
                                        </div>
                                        <p class="text-muted mv">扫码打赏，你说多少就多少</p>
                                        <p class="text-grey">打开微信扫一扫，即可进行扫码打赏哦</p>
                                    </div>
                                </div>
                                <div class="donate-footer">
                                    <ul class="nav nav-tabs nav-justified" role="tablist">
                                        <li role="presentation" class="active">
                                            <a href="#alipay" id="alipay-tab" role="tab" data-toggle="tab" aria-controls="alipay" aria-expanded="true">
                                                <i class="icon icon-alipay"></i>
                                                支付宝
                                            </a>
                                        </li>
                                        <li role="presentation">
                                            <a href="#wechatpay" role="tab" id="wechatpay-tab" data-toggle="tab" aria-controls="wechatpay" aria-expanded="false">
                                                <i class="icon icon-wepay"></i>
                                                微信支付
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <footer class="footer" itemscope itemtype="http://schema.org/WPFooter">
            <ul class="social-links">
                <li>
                    <a href="https://github.com/cofess" target="_blank" title="Github" data-toggle="tooltip" data-placement="top">
                        <i class="icon icon-github"></i>
                    </a>
                </li>
                <li>
                    <a href="http://weibo.com/cofess" target="_blank" title="Weibo" data-toggle="tooltip" data-placement="top">
                        <i class="icon icon-weibo"></i>
                    </a>
                </li>
                <li>
                    <a href="https://twitter.com/iwebued" target="_blank" title="Twitter" data-toggle="tooltip" data-placement="top">
                        <i class="icon icon-twitter"></i>
                    </a>
                </li>
                <li>
                    <a href="https://www.behance.net/cofess" target="_blank" title="Behance" data-toggle="tooltip" data-placement="top">
                        <i class="icon icon-behance"></i>
                    </a>
                </li>
                <li>
                    <a href="/atom.xml" target="_blank" title="Rss" data-toggle="tooltip" data-placement="top">
                        <i class="icon icon-rss"></i>
                    </a>
                </li>
            </ul>
            <div class="copyright">
                <div class="publishby">
                    Theme by <a href="https://github.com/cofess" target="_blank">cofess </a>
                    base on <a href="https://github.com/cofess/hexo-theme-pure" target="_blank">pure</a>
                    .
                </div>
            </div>
        </footer>
        <script src="/static/js/jquery.min.js"></script>
        <script>
            window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
        </script>
        <script src="/static/js/plugin.min.js"></script>
        <script src="/static/js/application.js"></script>
        <script>
            !function(T) {
                var N = {
                    TRANSLATION: {
                        POSTS: "文章",
                        PAGES: "页面",
                        CATEGORIES: "分类",
                        TAGS: "标签",
                        UNTITLED: "(未命名)"
                    },
                    ROOT_URL: "/",
                    CONTENT_URL: "/content.json"
                };
                T.INSIGHT_CONFIG = N
            }(window)
        </script>
        <script src="/static/js/insight.js"></script>
        <script async src="/static/js/busuanzi/2.3/busuanzi.pure.mini.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
        <script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
        <script src="/static/js/md5.min.js"></script>
        <script type="text/javascript">
            var gitalk = new Gitalk({
              clientID: '75bd4988642681bfe765',
              clientSecret: 'b82cea77315f08ca26ad9314e090181a2b3c0db9',
              repo: 'my_blog_comment', //保存所有评论的仓库名字
              owner: 'ttyhtg', //用户名
              admin: ['ttyhtg'],
              id: md5(location.pathname),     // Ensure uniqueness and length less than 50，
                // 这里用路径md5hansh签名后生成的值作为文章在github中的唯一标志
              distractionFreeMode: false  // Facebook-like distraction free mode
            })
            gitalk.render("comments")
        </script>
    </body>
</html>
<!-- rebuild by neat -->
